<template>
  <div id="myChart" :style="{width: '1000px', height: '400px',}"></div>
</template>

<script>
import axios from "axios";
// import Echarts from 'native-echarts'
import { createNamespacedHelpers } from "vuex";
const {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("finishedGoods");

//柱状图统计
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  name: "hello",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      arr1: [],
      arr2: []
    };
  },
  mounted() {
    this.drawLine(this.arr1, this.arr2);
    // this.addEChrats()
  },
  created() {
    this.getgoodsecharts();
    // this.getShops();
    // this.drawLine()
  },
  computed: {
    getgoodsCH() {
      return this.goodsDate;
    },
    ...mapState(["goodsDate"])
  },
  methods: {
    ...mapActions(["getgoodsecharts"]),
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表

      myChart.setOption({
        title: { text: "仓库的库存统计" },
        itemStyle: {
          color: "rgb(127,255,212)"
        },
        tooltip: {},
        xAxis: {
          data: this.arr1
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: this.arr2
          }
        ]
      });
    }
    // getShops() {
    //   this.arr1 = this.goodsDate.map(item => {
    //     return item.name;
    //   });

    //   this.arr2 = this.goodsDate.map(item => {
    //     return item.num;
    //   });
    // }
  },
  watch: {
    getgoodsCH() { 
      this.arr1 = this.goodsDate.map(item => {
        return item.name;
      });

      this.arr2 = this.goodsDate.map(item => {
        return item.num;
      });
      this.drawLine()
    }
  }
};
</script>

<style>
</style>